<template>
  <div id="table-app">
    <div class="table-box">
      <el-table
        :data="props.data"
        style="width: 100%"
        :header-cell-style="{ background: '#fafafe', color: '#1d1d1f' }"
        :border="true"
        :default-sort="{ prop: 'creation_time', order: 'descending' }"
      >
        <el-table-column label="名称/ID" class-name="elcell">
          <template #default="scope">
            <div class="toDetails" @click="toDetails(scope.row.build_id)">
              {{ scope.row.name }}
            </div>
            <el-tooltip effect="dark" :content="scope.row.build_id" placement="bottom">
              <div class="id-box">
                {{ scope.row.build_id }}
              </div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="version" label="版本" />
        <el-table-column prop="state" label="状态">
          <template #default="scope"> {{ $t(scope.row.state) }}</template></el-table-column
        >
        <el-table-column prop="build_type" label="应用包类型" />
        <el-table-column label="描述">
          <template #default="scope">
            <el-tooltip effect="dark" :content="scope.row.description" placement="bottom">
              <div class="idescribe">
                {{ scope.row.description }}
              </div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="size" label="应用包大小(Mb)" />
        <el-table-column prop="creation_time" label="创建时间" :formatter="timeFormatUTC" sortable />
        <el-table-column prop="operating_system" label="操作系统" />
        <el-table-column fixed="right" label="操作" width="180">
          <template #default="scope">
            <div class="actions-box">
              <div class="actions-details" @click="toDetails(scope.row.build_id)">详情</div>
              <div class="line" v-if="(scope.row.state == 'READY' || scope.row.state == 'FAILED') && userType >= 5"></div>
              <div
                class="actions-delete"
                v-if="(scope.row.state == 'READY' || scope.row.state == 'FAILED') && userType >= 5"
                @click="deleteApp(scope.row.build_id, scope.row.state)"
              >
                删除
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<style>
  .el-popper {
    max-width: 600px !important;
  }
</style>
<style lang="scss" scoped>
  #table-app {
    .table-box {
      border-radius: 2px;
      margin-top: 20px;
    }
    .idescribe {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
  }
</style>
<script lang="ts" setup>
  import appStore from '@/store'
  import { timeFormatUTC } from '@/utils/formatter'
  import ApplicationService, { builds, App } from '@/api/applicationService'
  import { ElMessageBox, ElMessage } from 'element-plus'
  import router from '@/router'
  import { ref } from 'vue'
  const props = defineProps({
    data: Array
  })
  const emits = defineEmits(['updateList'])
  let buildApp: App = {
    project_id: appStore.userStore.project_id,
    build_id: ''
  }
  let userType = ref()
  userType.value = localStorage.getItem('UserType') as string
  const deleteType = async (id: string, state: string) => {
    if (state == 'FAILED') {
      return 2
    }
    buildApp.build_id = id
    let res = await ApplicationService.getApplicationDetail(buildApp)
    if (res.status == 200) {
      if (res.data.fleet_list.count > 0) {
        return 1
      } else if (!res.data.build.storage_bucket_name && !res.data.build.storage_bucket_key) {
        return 2
      } else {
        return res.data.build.image_id
      }
    }
  }

  const deleteApp = async (id: string, state: string) => {
    let warning = await deleteType(id, state)
    let warn: string
    if (warning) {
      if (warning == 1) {
        warn = '该应用已被fleet使用，请删除关联的fleet后重试。'
        ElMessageBox.alert(warn, '温馨提示', {
          confirmButtonText: '确定',
          type: 'warning'
        })
        return
      } else if (warning == 2) {
        warn = '请确定删除该应用包吗？'
      } else {
        warn = `删除应用包时将会一同删除创建出的镜像${warning},请确定删除该应用包吗？`
      }

      ElMessageBox.confirm(warn, '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          buildApp.build_id = id
          let res = await ApplicationService.deleteApplication(buildApp)
          if (res.status === 204) {
            ElMessage({
              message: '删除成功！',
              type: 'success'
            })
            emits('updateList')
          }
        })
        .catch(() => {})
    }
  }

  const toDetails = async (id: string) => {
    router.push({
      name: 'applicationDetail',
      params: {
        id
      }
    })
  }
</script>
